import React, { useEffect } from "react";
import { Stack, useRouter, Slot } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useAuthStore } from "../stores/authStore";
import { useFrameworkReady } from "@/hooks/useFrameworkReady";

declare global {
  interface Window {
    frameworkReady?: () => void;
  }
}

export default function RootLayout() {
  const router = useRouter();
  const ready = useFrameworkReady();


  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

  useEffect(() => {
   // window.frameworkReady?.();
  }, []);
  console.log("isAuthenticated", isAuthenticated);
  useEffect(() => {
    if (isAuthenticated) {
      router.replace("/(tabs)"); // ✅ 登录后直接跳转到 tabs
    } else if (!ready) {
      router.replace("/splash"); // ✅ 初始化时显示开场动画
    } else {
      router.replace("/(auth)"); // ✅ 未登录跳转到 login
    }
  }, [isAuthenticated, ready]);
  return (
    <>
      <Stack
        screenOptions={{
          headerShown: false,
          animation: 'slide_from_right',
          presentation: 'card',
          animationDuration: 300,
          animationTypeForReplace: 'push'
        }}
      >
        <Stack.Screen name="splash" />
        <Stack.Screen name="(auth)/index" options={{ headerShown: false }} />
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" options={{ title: "Oops!" }} />
      </Stack>
      <StatusBar style="auto" />
    </>
  );
}